<template>
  <el-select v-model="selectValue" placeholder="请选择" @change="selectEvent" style="width: 130px;">
    <el-option
      v-for="item in selectOptions.data"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
import { reactive, onMounted, ref } from '@vue/composition-api'
export default {
  props: {
    // ['id', 'name', 'age', 'id]
    options: {
      type: Array,
      default: () => []
    },
    selectData: {
    }
  },
  setup (props, { emit }) {
    // 可选配置
    const optionalOptions = [
      { value: 'username', label: '用户名' },
      { value: 'phone', label: '手机号' },
      { value: 'email', label: '邮箱' },
      { value: 'id', label: 'ID' },
      { value: 'title', label: '标题' }
    ]
    // 选择的配置
    const selectOptions = reactive({
      data: []
    })
    // 初始化配置项
    const initOptions = () => {
      selectOptions.data = optionalOptions.filter(item => props.options.includes(item.value))
    }
    onMounted(() => {
      initOptions()
    })
    // 选择的值
    const selectValue = ref(null)
    // 选择事件
    const selectEvent = (value) => {
      const data = optionalOptions.filter(item => item.value === value)[0]
      emit('update:selectData', data)
    }
    return {
      selectOptions,
      selectValue,
      selectEvent
    }
  }
}
</script>

<style>

</style>
